• Глава 12. Построение форм
• Тег <CFFORM>
• Тег <CFINPUT>
  • Контроль ввода данных
  • Контроль с помощью регулярных выражений
  • Пример использования атрибута VALIDATE
  • Контроль с помощью кода JavaScript
  • Пример с использованием JavaScript
• Тег <CFTEXTINPUT>
• Тег <CFSELECT>
• Тег <CFSLIDER>
• Тег <CFTREE>
• Тег <CFGRID>
• Тег <CFAPPLET>
• Резюме

Глава 12

Построение форм

В предыдущих главах мы уже неоднократно использовали HTML-тег <FORM> позволяющий создавать формы для обработки данных. Впрочем, в ColdFusion существует тег <CFFORM>, предназначенный для той же цели, но при этом включающий в себя помимо текстовых полей ввода, флажков, переключателей (или радиокнопок) и списков, такие элементы, как дерево (tree), движок (slider), сетку данных (grid), а также предоставляющий возможность дополнять форму собственными Java-апплетами.

Помимо дополнительных элементов, позволяющих с легкостью обогатить собственные формы, применение тега <CFFORM> в сочетании с тегами ввода помогает контролировать поля ввода с помощью встроенного атрибута VALIDATE, тем самым облегчая написание кода. В то же время вы можете использовать HTML-тег <FORM> в комбинации с тегом <CFFORM>, используя атрибут PASSTHROUGH, но обо всем по порядку.

Тег формы <CFFORM> имеет следующие базовые управляющие элементы:

• <CFINPUT> — предназначен для размещения текстовых полей ввода (text input boxes), флажков (checkboxes) и переключателей (radio buttons);
  
• <CFSELECT> — задает список, позволяющий выбрать один или несколько вариантов.
  

Тег формы <CFFORM> может содержать управляющие элементы, основанные на Java-апплетах:

• <CFTEXTINPUT> — текстовое поле ввода с возможностью форматирования текста;
  
• <CFSLIDER> — движок, перемещаемый по вертикали или горизонтали, позволяющий визуально управлять числовыми величинами в указанном диапазоне;
  
• <CFTREE> — дерево, представляющее собой элемент управления для создания иерархического списка;
  
• <CFGRID> — сетку данных, позволяющую организовать работу с данными в виде сетки-таблицы со строками и колонками;
  
• <CFAPPLET> — собственные Java-апплеты.
  

Тег <CFFORM>

Синтаксис:

<CFFORM NAME = "name"

ACTION = "form_action"

PRESERVEDATA = "Yes I No"

ENABLECAB = "Yes | NO"

ONSUBMIT = "javascript"

TARGET = "window__name"

ENCTYPE = "type"

PASSTHROUGH = "HTML_attributes"

CODEBASE = "URL"

ARCHIVE = "URL"> Элементы формы </CFFORM>

В табл. 12.1 представлено описание атрибутов тега <CFFORM>.

Таблица 12.1. Описание атрибутов тега <CFFORM>

Тег <CFINPUT>

С помощью тега <CFINPUT> можно создавать такие управляющие элементы, как текстовые поля ввода, поля ввода пароля, флажки и переключатели (радиокнопки). За выбор типа управляющего элемента отвечает обязательный атрибут TYPE тега <CFINPUT>, который может принимать значения:

• text — текстовое поле ввода (по умолчанию); П password — поле ввода пароля;
  
• checkbox — флажек;
  
• radio — переключатель.

Например:

<CFINPUT TYPE="text" NAME="FirstName" VALUE="Anna" SIZE="10" MAXLENGTH="11">

Таким образом, мы создаем текстовое поле с заранее определенным значением "Anna", указанием размера поля с помощью атрибута SIZE и установкой максимального количества вводимых символов, используя атрибут MAXLENGTH.

Или, например:

<CFINPUT TYPE="password" NAME="Password" SIZE="10" MAXLENGTH="11">

С помощью приведенного примера создаем поле для ввода пароля. Следует отметить, что атрибуты SIZE и MAXLENGTH не распространяются на элементы С типами radio И checkbox.

Следующий пример:

<CFINPUT TYPE="checkbox" NAME="SubDis" VALUE="1" CHECKED="Yes">

Как видно по установленному атрибуту TYPE, это флажок, и определен он как выбранный по умолчанию, о чем говорит атрибут CHECKED. Причем передача указанного значения с помощью атрибута VALUE будет только в том случае, когда флажок отмечен как выбранный.

И еще один пример, демонстрирующий уже создание группы переключателей:

Children<CFINPUT TYPE="radio" NAME="AgeGroup" VALUE="1"> Adult><CFINPUT TYPE="radio" NAME="AgeGroup" VALUE="2" CHECKED> Senior<CFINPUT TYPE="radio" NAME="AgeGroup" VALUE="'3">

В этом примере отметим следующее, все три элемента имеют общее имя (атрибут NAME равен "AgeGroup"), тем самым мы указываем, что эти элементы относятся к одной группе, только один из них может быть выбран, и его значение будет передано. При использовании переключателей следует указывать значения элементов, используя атрибут VALUE. С помощью атрибута CHECKED мы указали выбранное по умолчанию значение равное 2. Заметим, что в ColdFusion для атрибутов с возможными значениями наподобие Yes/No, необязательно записывать Yes или NO, можно просто указать атрибут, и такая конструкция будет означать Yes.

Полный код может выглядеть так:

<HTML> <HEAD>

<TITLE>CFINPUT</TITLE> </HEAD> <BODY>

<hl>Log In</hl>

<TABLE border='0' cellspacing='2' cellpadding='2'>

<CFFORM NAME="Forml" ACTION="LogInGO.cfm">

<TR><TD align="right">First Name: </TD><TD>

<CFINPUT TYPE="text" NAME="FirstName" VALUE="Anna"

SIZE="10" MAXLENGTH="11"> </TDX/TR>

<TR><TD align="right">Password:</TD><TD>

<CFINPUT TYPE="password" NAME="Password"

SIZE="10" MAXLENGTH="11"> </TD></TR>

<TR><TD align="right">Age Group:</TD><TD>

Children<CFINPUT TYPE="radio" NAME="AgeGroup" VALUE="1"> Adult<CFINPUT TYPE="radio" NAME="AgeGroup" VALUE="2" CHECKED Senior<CFINPUT TYPE="radio" NAME="AgeGroup" VALUE="3"> </TD></TR> <TRXTD align="right">To subscribe for dispatch:</TD><TD>

<CFINPUT TYPE="checkbox" NAME="SubDis" VALUE="1" CHECKED="Yes"> </TD></TR>

<TR><TD align="right"xinput type='submit' value='Send'></TD>

<TD><input type='reset' value=' Reset '></TD></TR> </CFFORM>

</TABLE> </BODY> </HTML>

Для удобства размещения элементов на странице мы использовали HTML-тег <TABLE>, а флажок SubDis поместили в конце для придания форме эстетического вида.

Контроль ввода данных

При создании форм достаточно часто приходится проверять правильность заполнения полей формы, как мы уже неоднократно демонстрировали, как с помощью программ на языке JavaScript, так и тегов ColdFusion. Однако при использовании тегов <CFINPUT> и <CFTEXTINPUT> можно проконтролировать введенные данные без написания какого-либо кода, указав атрибут VALIDATE, ВХОДЯЩИЙ В ЭТИ тэги.

Атрибут VALIDATE, в свою очередь, может принимать следующие значения:

• Date — проверяет соответствие значения поля американскому формату даты (mm/dd/yyyy);
  
• Eurodate — проверяет соответствие значения поля европейскому формату даты (dd/mm/yyyy);
  
• Time — проверяет соответствие формату времени (hh:mm:ss);
  
• Float — проверяет соответствие типу данных float;
  
• integer — проверяет соответствие типу данных integer;
  
• Telephone — проверяет соответствие телефонного номера формату "###-###-####", где дефис можно опускать, а код города и телефонный номер должны начинаться с цифры;
  
• zipcode — проверяет соответствие почтового адреса, который может состоять из 5 или 9 цифр, формату "#####-####"; только для США;
  
• Creditcard — проверяет соответствие номера кредитной карточки определенному формату;
  
• social_security_number — проверяет соответствие номера социальной карточки формату "###-##-####";
  
• Reguiar_expression - проверяет соответствие указанного выражения формату регулярного выражения.
  

При указании одного из вышеперечисленных значений атрибута VALIDATE также можно установить атрибут сообщения MESSAGE, которое будет выводиться на экран при заполнении данными недопустимого формата.

Контроль с помощью регулярных выражений

Помимо значений, контролирующих ввод данных с предопределенными правилами при использовании тегов <CFINPUT> и <CFTEXTINPUT>, можно применять регулярные выражения (regular expression) для проверки соответствия текста, вводимого пользователем, собственному образцу, указанному с помощью атрибута PATTERN. Для определения образца того или иного поля ввода необходимо использовать обычные символы в сочетании со специальными символами.

Регулярные выражения позволяют проверять текстовые поля ввода для разнообразных условий. Можно создавать регулярное выражение, которое соответствует только числам в определенном диапазоне. Можно объединять простые регулярные выражения в сложные критерии поиска, чтобы соответствовать сложным образцам, например, одного из слов с различными окончаниями. Также в регулярных выражениях можно использовать переменные и функции ColdFusion, т. к. ColdFusion Server вычисляет переменные и функции прежде, чем определяется регулярное выражение.

В первую очередь следует отметить, что при формировании образца с помощью регулярного выражения для отображения специальных символов как обычных, следует использовать левую наклонную черту \ в качестве предшествующего этому символу. Например, для отображения знака + следует писать \+.

Специальными символами следует считать:

-*?.[^$(){|\

Приведем характерные правила для регулярных выражений. 3 Точка (.) соответствует любому символу.

• Набор символов, указанных в квадратных скобках ( [] ), соответствует одному из символов в этих скобках. Например, [abc] предполагает а, ь или с.
  
• Символ дефиса (-) позволяет указывать диапазон. Например, [A-F] предполагает любой символ от А до F в верхнем регистре.
  
• Если первым символом в скобках указан знак ^, это соответствует любому кроме указанных символов. Например, [^аbс] предполагает любой символ за исключением а, ь или с.
  
• Для игнорирования чувствительности к регистру клавиатуры можно указывать необходимый символ двойным написанием как, например [Аа] .
  
• Группа символов, указанных в круглых скобках, представляет некую единицу, с которой можно производить какие-либо действия. Например, (Кu) + предполагает повторение KU.
  
• Символы или сгруппированное выражение, сопровождаемое знаком звездочка (*), предусматривают наличие или отсутствие значения. Например, [A-F] * предполагает существование или отсутствие любого символа от А до F в верхнем регистре.
  
• Символы или сгруппированное выражение, сопровождаемые знаком вопроса (?), предполагают нулевое значение или регулярное выражение.
  

Например (good) ?bye предполагает goodbye или bye.

• Знак ^л в начале регулярного выражения соответствует началу поля.
  
• Знак $ в конце регулярного выражения соответствует окончанию поля.
  
• Регулярное выражение может состоять из нескольких выражений. Например, [A-F] [a-f]* предполагает любое слово, состоящие из букв от а до f независимо от регистра.
  
• Символ | позволяет осуществлять выбор между двумя выражениями. Например, cold(erlest) Предполагает colder или coldest.
  
• Фигурные скобки (о) используются для указания диапазона повторения регулярного выражения в формате {min,max}, где min — положительное целое число, указывающее минимальное количество повторений, a max — число, равное или превосходящее min, указывает максимальное количество повторений. Например (mu) {2,4} предполагает от 2 до 4 пар повторения mu. Синтаксис {,mах} недопустим.
  

Также при формировании регулярных выражений можно использовать escape-последовательности. Например, такие как:

• \d — число от 0 до 9, соответствует [0-9];
  
• \о — любой символ кроме чисел, соответствует [^0-9];
  
• \w — алфавитно-числовой символ или подчеркивание, соответствует " [А-
  
• z0-9_];
  
• Xw—не алфавитно-числовой символ или подчеркивание, соответствует
  
• [_A-Za-z0-9_]
  

И Т.Д.

Пример использования атрибута VALIDATE

Приведенный ниже пример позволяет продемонстрировать проверку заполняемых полей текущей формы с помощью атрибута VALIDATE, имеющего как конкретные знанения, так и значения на основе регулярного выражения, образец которого определен с помощью атрибута. PATTERN:

<HTML> <HEAD>

<TITLE>CFFORM Validation</TITLE> </HEAD> <BODY>

<hl>Sign Up</hl>

<TABLE border='0' cellspacing='2' cellpadding='0'>

<CFFORM NAME="Forml" ACTION="SignUpGO.cfm" >

<TR><TD align="right">E-Mail</TDXTR>

<CFINPUT TYPE="text" NAME="EMail"

REQUIRED="Yes" VALIDATE="Regular_expression"

РАТТЕКЫ="^[A-Za-z0-9_.]+(@){1}[A-Za-zO-9_.]+$"

SIZE="15" MAXLENGTH="16"> </TD></TR>

<TR><TD align="right">First Name</TD><TD>

<CFINPUT TYPE="text" NAME="FirstName"

REQUIRED="Yes" VALIDATE="Regular_expression"

PATTERN="[A-Za-z]"

MESSAGE="First Name, should not be empty and to include symbols 'A-Za-z'"

SIZE="10",MAXLENGTH="11"> </TD></TR>

<TR><TD align="right">Birthday</TD><TD>

<CFINPUT TYPE="text" NAME="Birthday"

REQUIRED="Yes" VALIDATE="Eurodate"

SIZE="10" MAXLENGTH="11"> </TD></TR>

<TRXTD align="right">Phone Num.</TD><TD>

<CFINPUT TYPE="text" NAME="PhoneNum"

REQUIRED="Yes" VALIDATE="Telephone" SIZE="12" MAXLENGTH="13"> </TD></TR> <TR><TD align="right"><input type='submit' value=' Add '></TD>

<TD><input type='reset' value='Clear'></TD></TR> </CFFORM>

</table> </BODY> </HTML>

В приведенном примере мы создаем правила ввода для полей EMail и FirstName, используя регулярные выражения, и указываем контролирующие значения для полей Birthday и phoneNum со встроенными правилами. При этом для поля FirstName создаем собственное сообщение об ошибке.

Контроль с помощью кода JavaScript

Как отмечалось, в предыдущих разделах мы уже применяли HTML-тег <FORM>, позволяющий создавать формы для обработки данных, где, впрочем, уже и использовали код JavaScript для контроля вводимых данных. При указании тега <CFFORM> также можно добавлять код JavaScript. Для этой цели следует использовать атрибут ONVALIDATE таких элементов формы как <CFINPUT>, <CFTEXTINPUT>, <CFSLIDER>, <CFTREE>, <CFGREED>.

При этом функции, указанной атрибутом ONVALIDATE, передаются такие объекты, как форма (form_obj), текущий элемент ввода (input_obj) и значение текущего элемента ввода.

Можно также использовать атрибут ONERROR для указания функции JavaScript, которая выполняется, если при заполнении полей формы происходит ошибка, т. е. когда введенные значения не удовлетворяют установленным правилам, причем независимо от того, с помощью VALIDATE или ONVALIDATE регулируются эти правила.

Атрибут ONERROR возможно применять в таких элементах формы, как <CFINPUT>, <CFTEXTINPUT>, <CFSELECT>, <CFSLIDER>, <CFTREE>, <CFGREED>.

При этом функции, указанной атрибутом ONERROR, передаются такие объекты, как форма (form_obj), текущий элемент ввода (input__obj), значение текущего элемента ввода и текст сообщения об ошибке.

Пример с использованием JavaScript

Приведенный далее пример продемонстрирует проверку заполняемых полей текущей формы, используя как значения атрибута VALIDATE с применением атрибута ONERROR, так и код JavaScript, указывая при этом названия функций с помощью атрибута ONVALIDATE:

<HTML> <HEAD>

<TITLE>CFFORM JavaScript Validation</TITLE> </HEAD> <BODY>

<script>

function Birthday_error(form, input, val, mess)

{ input.value='dd/mm/yyyy'; alert(mess); }

function Pass_(form){

if (form.Pass.value == "")

{ return (false); }

else { return (true); } }

function Conf_(form, input, val){

if (form.Pass.value = val)

{ return (true); }

else { return (false); } }

</script> <hl>Sign Up</hl>

<TABLE border='0' cellspacing='2' cellpadding='0'>

<CFFORM NAME="Forml" ACTION="SignUpGO.cfm" >

<TR><TD align="right">First Name</td><td>

<CFINPUT TYPE="text" NAME="FirstName"

REQUIRED="Yes" VALIDATE="Regular_expression" PATTERN="[A-Za-z]" SIZE="10" MAXLENGTH="11"> </TD></TR>

<TR><TD align="right">Birthday</TD><TD>

<CFINPUT TYPE="text" NAME="Birthday"

REQUIRED="Yes" VALIDATE="Eurodate" ONERROR="Birthday_error" SIZE="10" MAXLENGTH="11"> </TD></TR>

<TR><TD align="right">Password</TD><TD>

<CFINPUT TYPE="password" NAME="Pass"

REQUIRED="Yes" ONVALIDATE="Pass_" MESSAGE="Password, should not be empty" SIZE="8" MAXLENGTH="9"> </TD></TR>

<TR><TD align="right">Confirm</TD><TD>

<CFINPUT TYPE="password" NAME="Conf"

REQUIRED="Yes" ONVALIDATE="Conf_" MESSAGE="Fields: Password and Confirm,

should be identical!" SIZE="8" MAXLENGTH="9"> </TD></TR>

<TRXTD align="right"xinput type='submit' value=' Add '></TD>

<TD><input type='reset' value='Clear'></TD></TR>

</CFFORM> </TABLE>

</BODY> </HTML>

В приведенном примере мы создаем правила ввода для поля FirstName, используя регулярное выражение, указываем контролирующее значение для поля Birthday со встроенным правилом с помощью атрибута ONERROR и устанавливаем для полей Pass и conf контроль над вводом данных с помощью JavaScript.

В то же время вы можете добавить HTML-тег <FORM> в комбинации с тегом <CFFORM>, используя атрибут PASSTHROUGH следующим образом:

<HTML> <HEAD>

<TITLE>CFFORM(PASSTHROUGH) JavaScript Validation</TITLE> </HEAD> <BODY> <script>

function FName(val){

if(val=="") return false; else return true; }

</script> <hl>Sign Up</hl>

<TABLE border='0' cellspacing='2' cellpadding='0'>

<CFFORM NAME="Form1" ACTION="SignUpGO.cfm">

<TR><TD align="right">First Name</TD><TD>

<CFINPUT TYPE="text" NAME="FirstName"

REQUIRED="Yes" SIZE="10" MAXLENGTH="11" MESSAGE="First Name,

should not be empty" PASSTHROUGH="Yes" onClick = "FName(this.value)"> </TD></TR>

<TR><TD align="right"xinput type='submit' value=' Add '></TD>

<TD><input type=' reset' value=' Clear'></TD></TR> </CFFORM>

</TABLE> </BODY> </HTML>

В приведенном примере мы указываем атрибут PASSTHROUGH для поля FirstName и определяем при возникновении события onclick выполнение функции FName (this, value), что позволяет контролировать ввод данных для этого поля с помощью JavaScript.

Тег <CFTEXTINPUT>

Тег <CFTEXTINPUT> позволяет создавать текстовые поля ввода с возможностью форматирования текста. Этот управляющий элемент реализован на основании Java-апплета.

Например:

<CFTEXTINPUT NAME="textblockl"

HEIGHT="80" WIDTH="400" ALIGN="Top"

BGCOLOR="##8080CO"

TEXTCOLOR="White" BOLD="Yes" ITALIC="Yes"

FONTSI2E="72" VALUE="TextBlockl">

Здесь с помощью обязательного атрибута NAME задаем имя элемента <CFTEXTINPUT>, указываем высоту и ширину текстового поля в пикселах, используя атрибуты HEIGHT и WIDTH, задаем выравнивание поля по верхнему краю с помощью атрибута ALIGN, устанавливаем цвет заливки фона и цвет текста с помощью атрибутов BGCOLOR и TEXTCOLOR, придаем тексту жирный и наклонный характер, используя атрибуты BOLD и ITALIC, а также определяем размер шрифта атрибутом FONTSIZE и устанавливаем значение текстового поля атрибутом VALUE.

Заметим, что для назначения цвета необходимо использовать двойной символ # перед шестнадцатеричным числовым кодом или задавать цвет по названию, используя перечисленные ниже значения:

• Black — черный;
  
• Magenta - пурпурный;
  
• Cyan — голубой;
  
• Orange — оранжевый;
  
• Darkgray — темно-серый;
  
• Pink — розовый;
  
• Gray — серый;
  
• white — белый;
  
• Lightgray — светло-серый;
  
• Yellow — желтый.
  

И еще один пример из разряда применения тега <CFTEXTINPUT>:

<CFTEXTINPUT NAME="textblock2"

HEIGHT="40" WIDTH="400" ALIGN="Bottom"

BGCOLOR="IIFFFFD5"

TEXTCOLOR="Gray" FONTSIZE="36" VSPACE="5"

FONT="Zurich Ex ВТ" VALUE="TextBlock2">

Здесь в отличие от предыдущего примера добавлены еще два атрибута: VSPACE, позволяющий устанавливать величину незаполненного пространства в пикселах сверху и снизу от содержащего данный атрибут элемента, и FONT, предоставляющий возможность указывать шрифт текста.

Включим описанные примеры в одну страницу следующим образом:

<HTML> <HEAD>

<TITLE>CFTEXTINPUT</TITLE> </HEAD>

<BODY bgcolor="Silver">

<CFFORM NAME="Forml" ACTION="CFTEXTINPUT_.cfm">

<CFTEXTINPUT NAME="textblockl"

HEIGHT="80" WIDTH="400" ALIGN="Top" BGCOLOR="##8080CO" TEXTCOLOR="White"

BOLD="Yes" ITALIC="Yes" FONTSIZE="72" VALUE="TextBlockl">

<CFTEXTINPUT NAME="textblock2"

HEIGHT="40" WIDTH="400" ALIGN="Bottom" BGCOLOR="#FFFFD5" TEXTCOLOR="Gray" FONTSIZE="36" VSPACE="5" FONT="Zurich Ex ВТ" VALUE="TextBlock2">

</CFFORM> </BODY>

</HTML>

Мы не обсуждаем все существующие атрибуты тега <CFTEXTINPUT> и их возможные значения детально, но уверяем, их осталось не так много. Тег <CFTEXTINPUT>, так же, как и тег <CFINPUT>, поддерживает атрибуты
MESSAGE, ONERROR, REQUIRED,VALIDATE И ONVALIDATE.

Тег <CFSELECT>

Тег <CFSELECT> задает список, позволяющий выбирать один или несколько вариантов из списка. Если атрибут MULTIPLE не указан, то создается простой раскрывающийся список, в котором можно выбирать только один вариант. Его значение всегда передается, т. к. всегда хотя бы один пункт выбран. При указании атрибута MULTIPLE можно выбирать несколько значений. Синтаксис данного тега аналогичен синтаксису HTML-тега <s'eiect>.

Например:

<CFSELECT NAME="Destinationl">

<OPTION VALUE="l">World Trade Center

<OPTION VALUE="2">World Financial Center

<OPTION VALUE="3">Museum of Jewish Heritage

<DPTION VALUE="4">Battery Park </CFSELECT>

Здесь с помощью обязательного атрибута NAME задаем наименование элемента <CFSELECT> и указываем опции списка, используя знакомую конструкцию. Во всяком случае, эта конструкция хорошо знакома тем, кому доводилось применять НТМ-тег oeiectx

Так же, как и при использовании HTML-тега <seiect>, можно устанавливать значение по умолчанию, добавив при этом атрибут SELECTED для конкретной опции. Например:

<CFSELECT NAME="Destination2" SIZE="3">

<OPTION VALUE="l">Ellis Island

<OPTION VALUE="2">Wall Street

<OPTION VALUE="3" SELECTED>Statue of Liberty </CFSELECT>

В приведенном примере мы указали размер видимой части списка с помощью атрибута SIZE, однако это еще не повод, чтобы выбирать сразу несколько опций, удерживая клавиши <Ctrl> и <Shift>. Для подобной возможности, как было сказано, необходимо добавить атрибут MULTIPLE. Например:

<CFQUERY NAME="GetTour" DATASOURCE="#application.dsn#">

SELECT Key_tou, Name_tou

FROM Tour </CFQUERY>

<CFSELECT NAME="Tourl" MULTIPLE="Yes" SIZE="3">

<CFOUTPUT QUERY-"GctTour">

<OPTION VALUE="#key_tou#">#name_tou#

</CFOUTPUT> </CFSELECT>

В этом фрагменте кода в первую очередь следует обратить внимание на предварительно построенный запрос с помощью тега <CFQUERY>, который обсуждался в предыдущей главе. Это позволяет нам определять значения опций из базы данных. Однако для использования данных запроса в теге <CFSELECT> присутствуют следующие атрибуты: QUERY - имя запроса, VALUE — колонка запроса, выступающая в качестве значений списка, и DISPLAY — колонка запроса, отображаемая в списке. Например:

<CFQUERY NAME="GetTour" DATASOURCE="#application.dsn#">

SELECT Key__tou, Name_tou

FROM Tour </CFQUERY> <CFSELECT NAME="Tour2" MULTIPLE="Yes" SELECTED="3"

QUERY="GetTour" VALUE="key_tou" DISPLAY="name_tou"> </CFSELECT>

Атрибут SELECTED мы добавили исключительно для демонстрации указания значения по умолчанию.

Включим описанные примеры в одну страницу следующим образом:

<HTML> <HEAD>

<TITLE>CFSELECT</TITLE> </HEAD>

<BODY bgcolor="Silver">

<CFQUERY NAME="GetTour" DATASOURCE="#application.dsnf"> SELECT Key_tou, Name_tou

FROM Tour </CFQUERY>

<CFFORM NAME="Forml" ACTION="CFSELECT_.cfm">

<CFSELECT NAME="Destinationl">

<OPTION VALUE="l">World Trade Center

<OPTION VALUE="2">World Financial Center

<OPTION VALUE="3">Museum of Jewish Heritage

<OPTION VALUE="4">Battery Park

</CFSELECT> <br>

<CFSELECT NAME="Destination2" SIZE="3">

<DPTION VALUE="l">Ellis Island

<OPTION VALUE="2">Wall Street

<OPTION VALUE="3" SELECTED>Statue of Liberty </CFSELECT> <br>

<CFSELECT NAME="Tourl" MULTIPLE="Yes" SIZE="3">

<CFOUTPUT QUERY="GetTour">

<OPTION VALTJE="#key_toul">#name_toul </CFOUTPUT> </CFSELECT> <br>

<CFSELECT NAME="Tour2" MULTIPLE="Yes" SELECTED="3"

QUERY="GetTour" VALUE="key_tou" DISPLAY="name_tou"> </CFSELECT> </CFFORM> </BODY> </HTML>

Тег <CFSELECT>, так же, как теги <CFINPUT> и <CFTEXTINPUT>, поддерживает атрибуты MESSAGE, ONERROR И REQUIRED, и, кроме того, атрибут PASSTHROUGH.

Тег <CFSLIDER>

Тег <CFSLIDER> позволяет разместить в форме движок со шкалой или без нее, перемещаемый по вертикали или горизонтали и предоставляющий возможность визуально управлять числовыми величинами в указанном диапазоне. Этот управляющий элемент реализован на основании Java-апплета.

Например:

<CFSLIDER NAME="my1" RANGE="0,100" SCALE="1" VALUE="33" HEIGHT="25">

Здесь с помощью обязательного атрибута NAME задаем имя элемента <CFSLIDER>, определяем диапазон значений движка атрибутом RANGE, указываем масштаб шкалы движка с помощью атрибута SCALE, а также устанавливаем значение по умолчанию, используя атрибут VALUE, и указываем ширину горизонтального движка в пикселах атрибутом HEIGHT.

По умолчанию значение диапазона, устанавливаемого с помощью атрибута RANGE, равно от 0 до 100, а значение шкалы движка SCALE равно 1. То есть приведенный выше пример можно видоизменить, и результат при этом будет тождественен:

<CFSLIDER NAME="my1" VALUE="33" HEIGHT="25">

При размещении движка можно добавить подпись (label) с отображением текущего значения данного управляющего элемента, как показано в следующем примере:

<CFSLIDER NAME="my2" VALUE="50"

VSPACE="5" BGCOLOR="Gray" TEXTCOLOR="##FFFFD5"

LABEL="Value Slider: " WIDTH="200" HEIGHT="45">

Здесь помимо атрибута LABEL для отображения подписи задаются уже известные атрибуты, используемые в описанных выше управляющих элементах.

С помощью атрибута TICKMARKLABELS можно включить .отображение подписи шкалы движка с шагом, соответствующим масштабу шкалы, указанному атрибутом SCALE, как это показано в следующем примере:

<CFSLIDER NAME="my3" RANGE="0,50" SCALE="10"

VALUE="10" LABEL="Value Slider: " WIDTH="200"

HEIGHT="60" TICKMARKLABELS="Yes">

Также можно включать отображение самой шкалы, в виде линейки с засечками, добавив при этом атрибуты TICKMARKMAJOR или TICKMARKMINOR. И если в первом случае будут отображены только основные засечки в соответствии с установленным масштабом, то при использовании TICKMARKMINOR также будут показаны промежуточные засечки меньшей величины.

Например:

<CFSLIDER NAME="my4" RANGF,= "50,100" SCALE="10"

VALUK="90" HSPACE="5" WIDTH="200"

HEIGHT="60" TICKMARKMINOR="True" TICKMARKLABELS="Yes">

Здесь HSPACE позволяет устанавливать величину незаполненного пространства в пикселах слева и справа от содержащего данный атрибут элемента.

Если вас не устраивает, что в качестве подписи шкалы отображаются число-вые величины в указанном диапазоне, то, используя атрибут TICKMARKLABELS, можно сформировать собственный список значений, который станет отображаться в виде подписей шкалы. Причем, если диапазон меньше указанного количества элементов списка, лишние элементы будут игнорироваться, если же, наоборот, диапазон будет превосходить количество" элементов списка, то последний элемент повторится. Приведем пример со списком времен года:

<CFSLIDER NAME="my5" RANGE="1,4" VALUE="1"

VSPACE="S" LABEL="Seasons: " WIDTH="300" HEIGHT="70"

TICKMARKMINOR="True"

TICKMARKLABELS="Winter,Spring,Summer,Autumn"

FONT="Impact" BOLD="Yes" FONTSIZE="14">

В этом фрагменте добавлены атрибуты FONT, BOLD и FONTSIZE, позволяющие форматировать подпись, указанную атрибутом LABEL.

Все предыдущие примеры демонстрировали движки в горизонтальном по-ложении. Если же есть необходимость изобразить движок вертикально, то достаточно включить атрибут VERTICAL, как показано в следующем примере:

<CFSLIDER NAME="my6" RANGE="1,5" VALUE="1"

WIDTH="120" HEIGHT="120" VERTICAL="True"

TICKMARKMINOR="True" LABEL=" Language: "

TICKMARKLABELS="Russian,English,German,Spanish,French"

TICKMARKIMAGES="rus.gif,eng.gif,ger.gif, spa.gif, fre.gif">

Здесь присутствует еще один интересный атрибут, TICKMARKIMAGES, предполгающий перечисление через запятую графических файлов, содержимое которых в свою очередь будет выведено между шкалой и подписью шкалы. При этом, так же, как и с атрибутом TICKMARKLABELS, если диапазон меньше уканного количества графических файлов, лишние рисунки будут игнорироваться, если же, наоборот, диапазон будет превосходить количество графических файлов, то последний рисунок, указанный с помощью атрибута TICKMARKIMAGES, повторяется n раз.

Сведем все воедино:

<HTML> <HEAD>

<TITLE>CFSLIDER</TITLE> </HEAD>

<BODY bgcolor="Silver">

<CFFORM NAME="Forml" ACTION="CFSLIDER_.cfm">

<CFSLIDER NAME="myl" RANGE="0,100"

SCALE="1" VALUE="33"

HEIGHT="25"> <br> <CFSLIDER NAME="my2" VALUE="50"

VSPACE="5" BGCOLOR="Gray"

TEXTCOLOR="##FFFFD5"

LABEL="Value Slider: " WIDTH="200"

HEIGHT="45"> <br>

<CFSLIDER NAME="my3" RANGE="0,50"

SCALE="10" VALUE="10"

LABEL="Value Slider: " WIDTH="200"

HEIGHT="60"

TICKMARKLABELS="Yes">

<CFSLIDER NAME="my4" RANGE="50,

100" SCALE="10" VALUE="90"

HSPACE="5" WIDTH="200" HEIGHT="60" "

TICKMARKMAJOR="True" TICKMARKMINOR="True"

TICKMARKLABELS="Yes"> <br>

<CFSLIDER NAME="my5" RANGE="1,4" VALUE="1"

VSPACE="5" LABEL="Seasons: " WIDTH="300" HEIGHT="70"

TICKMARKMINOR="True"

TICKMARKLABELS="Winter,Spring,Summer,Autumn"

FONT="Impact" BOLD="Yes" FONTSIZE="14"> <br>

<CFSLIDER NAME="my6" RANGE="1,5" VALUE="1"

WIDTH="120" HEIGHT="120" VERTICAL="True"

TICKMARKMINOR="True" LABEL=" Language: "

TICKMARKLABELS="Russian,English,German,Spanish,French"

TICKMARKIMAGES="rus.gif,eng.gif,

ger.gif,spa.gif,fre.gif">

</CFFORM> </BODY> </HTML>

Стоит отметить еще один занимательный атрибут управляющего элемента <CFSLIDER>. ЭТО LOOKANDFEEL, который применяется для задания стиля элементов и может принимать следующие значения:

• Motif — стиль Motif;
  
• Windows — стиль (по умолчанию), используемый Windows;
  
• Metal — стиль, используемый Java Swing.
  

Например, изменим уже представленные примеры, добавив стиль Motif, как это показано для одного из первых примеров:

<CFSLIDER NAME="my1" RANGE="0,100" SCALE="1"

VALUE="33" HEIGHT="25" LOOKANDFEEL="Motif">

Ter <CFSLIDER>, так же, как теги <CFINPUT> и <CFTEXTINPUT>, поддерживает атрибуты MESSAGE, ONERROR И ONVALIDATE.

Тег <CFTREE>

Тег <CFTREE> позволяет разместить в форме дерево объектов и представляет собой элемент управления для создания иерархического списка, в котором каждый пункт может иметь подчиненный пункт или набор пунктов, выводимых с отступом. Пользователь может сворачивать список, делая невидимым подчиненные пункты, или, наоборот, раскрывать иерархию управляющего элемента. Пункт дерева может содержать текст и изображение. Этот управляющий элемент реализован на основе Java-апплета.

Для реализации пунктов необходимо внутри тега <CFTREE> использовать тег <CFTREEITEM>. Например, представим код страницы без использования запроса:

<HTML> <HEAD>

<TITLE>CFTREE</TITLE> </HEAD>

<BODY bgcolor="Silver">

<hl>Structuring Tegs</hl>

<CFFORM NAME="Forml" ACTION="CFTREE_GO.cfm">

<CFTREE NAME="StructuringTegs" HEIGHT="270" WIDTH="230"

ALIGN="TOP" COMPLETEPATH="Yes">

<CFTREEITEM VALUE="1.CFFORM">

<CFTREEITEM VALUE="2.FORM">

<CFTREEITEM VALUE="1.1.CFINPUT"

PARENT="1.CFFORM" IMG="Element">

<CFTREEITEM VALUE="1.2.CFTEXTINPUT"

PARENT="1.CFFORM" IMG="Element">

<CFTREEITEM VALUE="1.3.CFSELECT"

PARENT="1.CFFORM" IMG="Element">

<CFTREEITEM VALUE="1.4.CFSLIDER"

PARENT="1.CFFORM" IMG="Element">

<CFTREEITEM VALUE="1.5.CFTREE"

PARENT="1.CFFORM" IMG="Element">

<CFTREEITEM VALUE="1.6.CFGRID"

PARENT="1.CFFORM" IMG="Element">

<CFTREEITEM VALUE="1.7.CFAPPLET"

PARENT="1.CFFORM" IMG="Element">

<CFTREEITEM VALUE="2.1.INPUT"

PARENT="2.FORM" IMG="Element">

<CFTREEITEM VALUE="2.2.TEXTAREA"

PARENT="2.FORM" IMG="Element">

<CFTREEITEM VALUE="2.3.SELECT"

PARENT="2.FORM" IMG="Element">

<CFTREEITEM VALUE="1.5.1.CFTREEITEM"

PARENT="1.5.CFTREE" IMG="Document">

<CFTREEITEM VALUE="1.6.1.CFGRIDCOLUMN"

PARENT="1.6.CFGRID" IMG="Document">

<CFTREEITEM VALUE="1.6.2.CFGRIDROW"

PARENT="1.6.CFGRID" IMG="Document">

</CFTREE>

<input type='submit' value='Send'>

</CFFORM> </BODY>

</HTML>

Здесь обязательный атрибут VALUE тега <CFTREEITEM> задает значение пункта, а атрибут PARENT указывает на принадлежность к пункту более старшего

уровня иерархии или, как говорят, позволяет указать родителя. Атрибут IMG предоставляет возможность выбрать изображение для данного пункта, причем варианты могут быть следующие:

• Сd — компакт-диск;
  
• Сomputer — компьютер;
  
• Document — документ;
  
• Element — элемент;
  
• Folder — папка;
  
• Floppy — накопитель для гибких дисков;
  
• Fixed — подсоединенное устройство;
  
• Remote — сетевое устройство.
  

Впрочем, если ни один из существующих вариантов вас не устраивает, для атрибута IMG можно указывать путь к графическому файлу, который будет играть роль изображения для текущего пункта, как это будет показано ниже.

Управляющий элемент <CFTREE> позволяет выбирать один из пунктов иерархического списка, и при обработке формы передаются две переменные:

• Form, treename.node — возвращает значение выбранного пункта, узла;
  
• Form.treename.path — возвращает значение полного пути в иерархическом списке для выбранного пункта, . в форме [root]\nodel\node2\node_n\value.
  

Чтобы возвращать часть корня пути (root), необходимо установить атрибут COMPLETEPATH тега <CFTREE>, как показано в предыдущем примере. Причем, если пользователь выбирает пункт "1.5.1.CFTREEITEM", в этом случае будут переданы переменные:

Form.StructuringTegs.node = 1.5.1.CFTREEITEM

Form.StructuringTegs.path = 1 .CFFORMM. 5.CFTREEM. 5 .1 .CFTREEITEM

По умолчанию в качестве разделителя применяется левая наклонная черта. Однако, используя атрибут DELIMITER тега <CFTREE>, этот разделительный символ всегда можно изменить.

Следующим примером мы предваряем создание иерархического списка с использованием запросов и применением гипертекстовых ссылок:

<HTML> <HEAD>

<TITLE>CFTREE</TITLE> </HEAD> <BODY bgcolor="Silver">

<CFQUERY NAME="GetTraveler" DATASOURCE="#application.dsn#">

SELECT Key_tra, 'mailto:' + EMail_tra AS EMail,

FirstName_tra + ' '+ LastName_tra AS TName FROM Traveler

ORDER BY FirstName_tra, LastName_tra </CFQUERY>

<hl>Travelers Tree</hl>

<CFFORM NAME="Forml" ACTION="CFTREE_2.cfm">

<CFTREE NAME="Tour" HEIGHT="290" WIDTH="190"

HSCROLL="No" FONTSIZE="13" FONT="Trebuchet MS">

<CFTREEITEM VALUE="Key_tra" DISPLAY="TName"

QUERY="GetTraveler" QUERYASROOT="Travelers" IMG="People.gif,BulletCircle.gif" HREF=",EMail">

</CFTREE> </CFFORM> </BODY> </HTML>

Здесь предварительно создается запрос с необходимыми данными, после чего указывается обязательный атрибут VALUE и имя запроса с помощью атрибута QUERY тега <CFTREEITEM>. В качестве атрибута VALUE задается одно или несколько полей запроса, перечисленных через запятую. Причем каждое последующее указанное поле будет представляться в качестве вложенного пункта в предыдущее поле. Если необходимо в списке отобразить одни поля базы данных, а в качестве передаваемых значений использовать другие, то для этой цели следует добавить атрибут DISPLAY.

Атрибут QUERYASROOT указывает на использование имени запроса как верхнего уровня иерархического списка и может принимать следующие значения:

• Yes — да;
  
• NO — нет, при этом элементы запроса будут являться верхним уровнем иерархического списка;
  
• собственный текст наименования корня, как показано в примере.
  

Еще одной из интересных деталей приведенного примера является использование атрибута HREF, позволяющего представлять надписи пунктов списка в виде гипертекстовых ссылок. Как можно было заметить, в нашем примере мы извлекаем из базы данных почтовые адреса путешественников и добавляем в начало каждого адреса строку "mailto:", что даст возможность пользователю отправлять письма по адресу того или иного путешественника. Заметим, что в нашем примере атрибут HREF указывает .на наличие гипертекстовых ссылок для второго уровня иерархического списка, о чем свидетельствует наличие запятой. Также можно напрямую указывать ссылку на вызываемый ресурс, например:

HREF = "http://www.youserver.com"

При этом, когда пользователь выбирает один из пунктов иерархического списка, чтобы активизировать данный ресурс, то в конец URL добавляется строка, позволяющая .передавать значение выбранного пункта в качестве переменной по следующему правилу:

http://www.youserver.com?CFTREEITEMKEY=selected_value

Для отключения добавления переменной в конец URL следует при использовании тега <CFTREE> установить атрибут APPENDKEY="NO". Например, несколько видоизменим приведенный выше пример:

<CFFORM NAME="Forml" ACTION="CFTREE_2.cfm">

<CFTREE NAME="Tour" HEIGHT="290" WIDTH="190"

HSCROLL="No" FONTSIZE="13" FONT="Trebuchet MS" APPENDKEY="No">

<CFTREEITEM VALUE="Key_tra" DISPLAY="TName"

QUERY="GetTraveler" QUERYASROOT="Travelers"

IMG="People.gif,BulletCircle.gif" HREF="http://localhost,EMail" TARGET="_blank">

</CFTREE> </CFFORM>

В данном фрагменте был включен еще один атрибут, TARGET, позволяющий указывать правило открытия целевой страницы. В нашем случае значение _biank открывает по ссылке страницу в новом окне обозревателя. Так же, используя этот атрибут, можно задавать имя фрейма. Заметим, что мы указываем правило открытия страницы только для первого уровня иерархического списка. В этом же примере мы устанавливаем следующие атрибуты: HSCROLL, который отвечает за отображение горизонтальной полосы прокрутки, FONTSIZE и FONT, которые отвечают за форматирование текста, и уже упомянутый атрибут IMG, предоставляющий возможность указать изображения для каждого уровня иерархического списка.

Представим еще один пример создания иерархического списка с использованием запроса:

<HTML> <HEAD>

<TITLE>CFTREE</TITLE> </HEAD>

<BODY bgcolor="Silver">

<CFQUERY NAME="GetRoute" DATASOURCE="tapplication.dsn#">

SELECT Key_rou, Name_tou, Name_des

FROM Tour, Destination, Route WHERE Route.key_tou=Tour.key_tou

AND Route.key_des=Destination.key_des </CFQUERY>

<hl>Routes Tree</hl> <CFFORM NAME="Forml"

ACTION="CFTREE_3.cfm">

<CFTREE NAME="Route" HEIGHT="250" WIDTH="260" HSCROLL="No">

<CFTREEITEM VALUE="Name_tou, Name_des"

QUERY="GetRoute" EXPAND="No"

IMG="bulletL.gif,bullet.gif" IMGOPEN="bulletL2.gif">

</CFTREE> </CFFORM> </BODY> </HTML>

Здесь с помощью атрибута VALUE указаны два поля, данные первого из которых будут представлены как основной уровень, а данные второго будут включены в качестве подчиненного уровня иерархического списка. В этом примере мы использовали атрибут IMGOPEN, позволяющий назначить изображение для пункта, находящегося в раскрытом состоянии, причем данный атрибут может принимать значения, аналогичные атрибуту IMG. Атрибут EXPAND, также примененный в последнем примере, позволяет определить состояние пунктов: в раскрытом виде с отображаемыми подпунктами — значение Yes (по умолчанию), в скрытом с невидимыми подпунктами — значение NO.

Отметим, что так же, как была скрыта горизонтальная полоса прокрутки управляющего элемента <CFTREE> с использованием атрибута HSCROLL, можно скрыть вертикальную полосу прокрутки, указав атрибут VSCROLL. Управляющий элемент <CFTREE>, так же, как и <CFSLIDER>, поддерживает использование атрибута LOOKANDFEEL, который позволяет задавать один из представленных стилей, Motif, Windows (по умолчанию) или Metal.

Тег <CFTREE> подобно тегам <CFINPUT>, <CFTEXTINPUT> и <CFSLIDER> поддерживает атрибуты MESSAGE, ONERROR И ONVALIDATE.

Тег <CFGRID>

Тег <CFGRID> отображает сетку для данных, позволяющую организовать работу с данными в виде таблицы со строками и колонками. Этот управляющий элемент реализован на основе Java-апплета.

Управляющий элемент <CFGRID> позволяет:

• размещать в таблице графические изображения;
  

И подключать данные, используя запросы к базам данных;

• сортировать включенные данные;
  
• модифицировать, добавлять и удалять данные;
  
• визуально изменять ширину и порядок отображения колонок;
  
• видоизменять фон и шрифт таблицы;
  
• управлять отображением заголовка, разделительных линий, колонки с порядковыми номерами;
  

И представлять надписи командных кнопок в виде изображений;

• выводить данные различными цветами в зависимости от их значения.
  

Для управления колонками и строками в <CFGRID> необходимо использовать теги <CFGRIDCOLUMN> и <CFGRIDROW>. Например, создадим сетку с четырьмя колонками и двумя строками:

<HTML> <HEAD>

<TITLE>CFGRID</TITLE> </HEAD>

<BODY bgcolor="Silver"> <hl>Grid</hl>

<CFFORM NAME="Forml" ACTION="CFGRID_1.cfm"> <CFGRID NAME="myGrid"

WIDTH="240" HEIGHT="90" SELECTMODE="Single">

<CFGRIDCOLUMN NAME="One">

<CFGRIDCOLUMN NAME="Two">

<CFGRIDCOLUMN NAME="Three">

<CFGRIDCOLUMN NAME="Pic" TYPE="Image">

<CFGRIDROW DATA="1,2,3,bulletL.gif">

<CFGRIDROW DATA="4,5,6,bulletL2.gif"> </CFGRID>

</CFFORM> </BODY> </HTML>

Здесь четвертая колонка представляет графические изображения, т. к. с помощью атрибута TYPE тега <CFGRIDCOLUMN> указан соответствующий тип. Типы данных могут быть следующими:

• Image — изображение;
  
• Numeric — числовые данные;
  
• Boolean — при использовании данного типа ячейки отображаются в виде флажка (checkbox), предназначенного для данных с логическим значением;
  
• string_nocase — колонка с данными без учета чувствительности к регистру при использовании сортировки данных.
  

В свою очередь, сами изображения указаны как ссылка на графические файлы. Впрочем, здесь можно назначать уже известные изображения такие как Cd (компакт-ДИСК), Computer (компьютер), Document (документ), Element (элемент), Folder (папка), Floppy (накопитель для гибких дисков), Fixed (подсоединенное устройство), Remote (сетевое устройство).

Немаловажным является атрибут SELECTMODE тега <CFGRID>, предназначенный для выбора способа отражения и поведения данных, который может принимать следующие значения:

• Browse — только для просмотра, выделение ячеек отключено (по умолчанию);
  
• single — при перемещении по управляющему элементу выделяется текущая ячейка;
  
• ROW — при перемещении выделяется вся текущая строка;
  
• Column — при перемещении выделяется вся текущая колонка;
  
• Edit — позволяет редактировать данные.
  

Приведенный ниже пример интересен тем, что данные элемента <CFGRID> определяются запросом к базе данных при использовании атрибута QUERY:

<HTML> <HEAD>

<TITLE>CFGRID</TITLE> </HEAD>

<BODY bgcolor="Silver">

<CFQUERY NAME="GetTraveler" DATASOURCE="#application.dsn#"> SELECT *

FROM Traveler

ORDER BY FirstName_tra, LastName_tra </CFQUERY>

<hl>Travelers Grid</hl>

<CFFORM NAME="Forml" ACTION="CFGRID__2.cfm">

<CFGRID NAME="TravelerGrid" QUERY="GetTraveler" WIDTH="390" HEIGHT="285"

AUTOWIDTH="Yes" SELECTMODE-"Single">

<CFGRIDCOLUMN NAME="FirstName_tra" HEADER="First Name">

<CFGRIDCOLUMN NAME-"LastName_tra" HEADER="Last Name">

<CFGRIDCOLUMN NAME="EMail_tra" HEADER="E-Mail" WIDTH="110">

<CFGRIDCOLUMN NAME="Birthday_tra" HEADER="Birthday" WIDTH="70">

</CFGRID> </CFFORM>

</BODY> </HTML>

Обращаем ваше внимание на то, что атрибут HEADER тега <CFGRIDCOLUMN> необязателен, однако полезен, когда текст заголовка колонки требуется специфицировать, как отличный от наименования поля таблицы данных. Атрибут же NAME указывает на поле таблицы данных, которые будут отражены в колонке. При отсутствии атрибута HEADER значение атрибута NAME отражается в качестве заголовка. Использованный в этом примере атрибут AUTOWIDTH обеспечивает автоматическое выравнивание ширины каждой колонки так, чтобы все колонки были видимы в пределах ширины, указанной атрибутом WIDTH тега <CFGRID>. При этом ширина указанных явно колонок остается неизменной.

Управляющий элемент <CFGRID> достаточно богат возможностями форматирования фона, данных, заголовка и колонки с порядковыми номерами. В следующем примере тег <CFGRID> дополнен целым рядом атрибутов, отвечающих за визуальное отображение элемента:

<HTML> <HEAD>

<TITLE>CFGRID</TITLE> </HEAD>

<BODY bgcolor="Silver">

<CFQUERY NAME="GetTraveler" DATASOURCE="lapplication.dsnt"> SELECT *

FROM Traveler

ORDER BY FirstName_tra, LastName_tra </CFQUERY>

<hl>Travelers Grid</hl>

<CFFORM NAME="Forml" ACTION="CFGRID_3.cfm">

<CFGRID NAME="TravelerGrid" QUERY="GetTraveler"

WIDTH="470" HEIGHT="270" AUTOWIDTH="Yes"

SELECTMODE="Single"

COLHEADERALIGN="Center"

FONT="Zurich Ex ВТ"

FONTSIZE="11"

COLHEADERFONT="Zurich

BlkEx ВТ"

ROWHEADERFONT="Zurich Ex ВТ"

COLHEADERFONTSIZE="11" ROWHEADERFONTSIZE="8"

SELECTCOLOR="##808040" ROWHEIGHT="24" BGCOLOR="##EDECEO"

TEXTCOLOR="##696934">

<CFGRIDCOLUMN NAME="FirstName_tra" HEADER="First Name">

<CFGRIDCOLUMN NAME="LastName_tra" HEADER="Last Name">

<CFGRIDCOLUMN NAME="EMail_tra" HEADER="E-Mail" WIDTH="110">

<CFGRIDCOLUMN NAME="Birthday_tra" HEADER="Birthday" WIDTH="70">

</CFGRID> </CFFORM> </BODY> </HTML>

Здесь атрибут COLHEADERALIGN позволяет выравнивать заголовок по центру (Center), по левому (Left) или по правому (Right) краю. Атрибутами COLHEADERFONT И ROWHEADERFONT Задаем шрифт заголовка колонок и шрифт колонки с порядковыми номерами, атрибутами COLHEADERFONTSIZE и POWHEADERFONTSIZE назначаем размер шрифта заголовка колонок и колонки с порядковыми номерами. Атрибутом SELECTCOLOR определяем цвет выделенной ячейки или ячеек, если атрибут SELECTMODE принимает значение ROW или Column, а также с помощью атрибута ROWHEIGHT задаем высоту рядов. В свою очередь атрибутами FONT, FONTSIZE, TEXTCOLOR и BGCOLOR назначаем шрифт, размер, цвет и фон текста данных.

Как мы уже отметили, в качестве типа колонки можно задавать значение, равное Boolean, представляя тем самым колонку в виде флажка (checkbox), предназначенного для данных с логическим значением. В следующем примере добавлена новая колонка, отражающая пол зарегистрированных путешественников, в виде флажка:

<HTML> <HEAD>

<TITLE>CFGRID</TITLE> </HEAD>

<BODY bgcolor="Silver">

<CFQUERY NAME="GetTraveler" DATASOURCE="tapplication.dsn#"> SELECT *

FROM Traveler

ORDER BY FirstName_tra, LastName_tra </CFQUERY>

<hl>Travelers Grid</hl>

<CFFORM NAME="Forml"ACTION="CFGRID_4.cfm">

<CFGRID NAME="TravelerGrid"

QUERY="GetTraveler" WIDTH="500"

HEIGHT="280" AUTOWIDTH="Yes" SELECTMODE="Column"

COLHEADERALIGN="Center"

FONT="Zurich Ex ВТ" FONTSIZE="11"

COLHEADERFONT="Zurich BlkEx ВТ"

ROWHEADERFONT="Zurich Ex ВТ"

COLHEADERFONTSIZE="11" ROWHEADERFONTSIZE="8"

SELECTCOLOR="##808040" ROWHEIGHT="24"

BGCOLOR="##EDECE0" TEXTCOLOR="##696934" SORT="Yes"

SORTASCENDINGBUTTON="Asc" SORTDESCENDINGBUTTON="Desc">

<CFGRIDCOLUMN NAME="FirstName_tra" HEADER="First Name">

<CFGRIDCOLUMN NAME="LastName_tra" HEADER="Last Narae">

<CFGRIDCOLUMN NAME="EMail_tra" HEADER="E-Mail" WIDTH="110">

<CFGRIDCOLUMN NAME="Gender_tra" HEADER="M/W" WIDTH="30"

TYPE="Boolean">

<CFGRIDCOLUMN NAME="Birthday_tra" HEADER="Birthday" WIDTH="70">

</CFGRID> </CFFORM> </BODY> </HTML>

В данном фрагменте кода также использован атрибут SORT тега <CFGRID>, указывающий на размещение в нижней части управляющего элемента дополнительных кнопок для сортировки данных. Атрибуты SORTASCENDINGBUTTON И SORTDESCENDINGBUTTON позволяют указывать собственный текст на кнопках. По умолчанию в качестве текста кнопок сортировки принимаются значения sortAsc и sortoesc.

Тег <CFGRIDCOLUMN>, так же, как и тег <CFTREEITEM>, поддерживает атрибуты HREF, HREFKEY И TARGET, позволяющие создать гипертекстовые ссылки, передавать значение выбранной записи в качестве переменной и указывать правило открытия целевой страницы.

Далее приведем пример, где две колонки являются ссылками.

<HTML> <HEAD>

<TITLE>CFGRID</TITLE> </HEAD>

<BODY.bgcolor="Silver" alink="#107098" link="#0ClC47" vlink="#003366">

<CFQUERY NAME="GetTraveler" DATASOURCE="#application.dsn#">

SELECT *, 'mailto:' + EMail_tra AS EMail FROM Traveler

ORDER BY FirstName_tra, LastName_tra </CFQUERY>

<hl>Travelers Grid</hl>

<CFFORM NAME="Forml" ACTION-"CFGRID_5.cfm">

<CFGRID NAME="TravelerGrid" QUERY="GetTraveler"

WIDTH="500" HEIGHT="280" AUTOWIDTH="Yes"

SELECTMODE="Single"

COLHEADERALIGN="Center" FONT="Zurich Ex ВТ"

FONTSIZE="11" COLHEADERFONT="Zurich BlkEx ВТ"

ROWHEADERFONT="Zurich Ex ВТ"

COLHEADERFONTSIZE="11" ROWHEADERFONTSIZE="8"

SELECTCOLOR="##808040" ROWHEIGHT="24"

BGCOLOR="#IEDECE0" TEXTCOLOR="#I696934" SORT="Yes"

PICTOREBAR="Yes"> <CFGRIDCOLUMN NAME="Key_tra" DISPIAY="No">

<CFGRIDCOLUMN NAME="FirstName_tra" HEADER="First Name"

HREF="DetalTraveler.cfm" HREFKEY="Key_tra">

<CFGRIDCOLUMN NAME="LastName_tra" HEADER="Last Name">

<CFGRIDCOLUMN NAME="EMail" DISPLAY="No">

<CFGRIDCOLUMN NAME="EMail_tra"

HEADER="E-Mail" WIDTH="110"

HREF="EMail"> <CFGRIDCOLUMN NAME="Gender_tra"

HEADER="M/W" WIDTH="30"

TYPE="Boolean">

<CFGRIDCOLUMN NAME="Birthday_tra"

HEADER="Birthday" WIDTH="70"> </CFGRID> </CFFORM>

</BODY> </HTML>

Правило передачи значений выбранной записи при использовании гипертекстовых ссылок тега <CFGRIDCOLUMN> аналогично правилу передачи значений тега <CFTREEITEM>. В этом же примере мы использовали атрибут PICTUREBAR, предназначенный для вывода на кнопках вспомогательных изображений, характеризующих возможные действия.

Предыдущая глава была полностью посвящена модификации, добавлению и удалению данных. Так вот, управляющий элемент <CFGRID> позволяет облегчить процесс формирования интерфейса для решения подобных задач. Заданием значения атрибута SELECTMODE тега <CFGRID> равным Edit предполагается возможность редактирования данных непосредственно внутри построенной таблицы данных. Указав же при этом атрибуты INSERT и DELETE, как показано в следующем примере, в нижней части управляющего элемента появляются дополнительные кнопки, позволяющие выполнять соответствующие действия (вставить и удалить). Впоследствии же остается только обработать произведенные изменения в таблице и применить эти изменения к базе данных, являющейся источником управляющего элемента <CFGRID>.

При редактировании данных, используя управляющий элемент <CFGRID>, ColdFusion создает следующие массивы:

• GridName.colName[RecordIndex] — хранит новое значение отредактированной ячейки;
  
• GridName.Original.ColName[Recordindex] — хранит первоначальное значение отредактированной ячейки;
  
• GridName. RowStatus. Action [Recordindex] - хранит ТИП изменений отредактированной записи таблицы: O — для удаления, I — для вставки или и — для обновления.
  

Например, для обработки выполненных изменений при передаче данных на страницу, указанную атрибутом ACTION тега <CFFORM>, можно сформировать следующий код:

<CFIF isDefined("Form.TravelerGrid.

RowStatus.Action")>

<CFLOOP INDEX="Record" FROM="1"

TO=#ArrayLen(Form.TravelerGrid.

RowStatus.Action)#>

<CFSWITCH EXPRESSION=#Form.

TravelerGrid.RowStatus.

Action[Record]#>

<CFCASE VALUE="U">

<!---Обновление (UPDATE)--->

</CFCASE>

<CFCASE VALUE="I">

<!---Вставка (INSERT)--->

</CFCASE>

<CFCASE VALUE="D">

<!---Удаление (DELETE)--->

</CFCASE> </CFSWITCH> </CFLOOP> </CFIF>

где TravelerGrid — имя элемента <CFGRID>.

Следующий пример состоит из двух частей или вернее из двух страниц: CFGRID_6.cfm (листинг 12.1), где расположена таблица, и RecordTravelers.cfm (листинг 12.2), где происходит обработка и принятие исправлений. Далее происходит возвращение на страницу с таблицей.

Листинг 12.1. Код страницы CFGRID_6.cfm

<HTML> <HEAD>

<TITLE>CFGRID</TITLE> </HEAD>

<BODY bgcolor="Silver">

<CFQUERY NAME="GetTraveler"

DATASOURCE="#application.dsn#">

SELECT *

FROM Traveler

ORDER BY FirstName_tra,

LastName_tra </CFQUERY>

<hl>Travelers Grid</hl>

<CFFORM NAME="Forml"

ACTION="RecordTravelers.cfm">

<CFGRID NAME="TravelerGrid"

QUERY="GetTraveler"

WIDTH="500" HEIGHT="280"

AUTOWIDTH="Yes" SELECTMODE="Edit"

COLHEADERALIGN="Center"

FONT="Zurich Ex ВТ" FONTSIZE="11"

COLHEADERFONT="Zurich BlkEx ВТ"

ROWHEADERFONT="Zurich Ex ВТ"

COLHEADERFONTSIZE="11" ROWHEADERFONTSIZE="8"

SELECTCOLOR="##808040" ROWHEIGHT="24"

BGCOLOR="ltEDECEO" TEXTCOLOR="ttt696934"

SORT="Yes" INSERT="Yes" DELETE--="Yes"

PICTUREBAR="Yes"> <CFGRIDCOLUMN NAME="Key_tra"

DISPLAY="No"> <CFGRIDCOLUMN NAME="Fir3tNome_tra"

HEADER="First Name"> <CFGRIDCOLUMN NAME="LastName_tra"

HEADER="Last Name"> <CFGRIDCOLUMN NAME="EMail_tra"

HEADER="E-Mail" WIDTH="110">

<CFGRIDCOLUMN NAME="Gender_tra"

HEADER="M/W" WIDTH="30"

TYPE="Boolean"> <CFGRIDCOLUMN NAME="Birthday_tra"

HEADER="Birthday" WIDTH="70"

BGCOLOR="(CX GT 1970-06-06 ? EDECE0 : Orange)">

</CFGRID>

<br><input type='Submit' value='Record'>

</CFFORM> </BODY> </HTML>

Листинг 12.2. Код страницы RecordTravelers.cfm

<HTML> <HEAD>

<TITLE>CFGRID</TITLE> </HEAD>

<BODY bgcolor="Silver">

<CFIF isDefined("Form.TravelerGrid.RowStatus.Action")>

<CCFLOOP INDEX="Record" FROM="1"

TO=#ArrayLen(Form.TravelerGrid.RowStatus.Action)#>

<CFSWITCH EXPRESSION=fForm.

TravelerGrid.RowStatus.Action[Record]#>

<CFCASE VALUE="U">

<CFQUERY NAME="UpdateTraveler"

DATASOURCE="#application.dsn#">

UPDATE Traveler

SET FirstName_tra='#Form.TravelerGrid.

FirstName_tra[Record]#',

LastName_tra='#Form.TravelerGrid.

LastName_tra[Record]#',

EMail_tra='#Form.TravelerGrid.

EMail_tra[Record]#',

Gender_tra='#Form.TravelerGrid.

Gender_tra[Record]#',

Birthday_tra='#Form.TravelerGrid.

Birthday_tra[Record]#' WHERE

Key_tra=#Form.TravelerGrid.

Original.Key_tra[Record]#

</CFQUERY> </CFCASE> <CFCASE VALUE="1">

<CFQUERY NAME="InsertTraveler"

DATASOURCE="lapplication.dsn#">

INSERT INTO Traveler(Firs.tName_tra,

LastName_tra, EMail_tra,

Gender_tra, Birthday_tra,

Password_tra) VALUES

('#Form.TravelerGrid.FirstName_tra[Record]#',

'#Form.TravelerGrid.LastName_tra[Record]#',

'#Form.TravelerGrid.EMail_tra[Record]#',

'#Form.TravelerGrid.Gender_tra[Record]#',

'#Form.TravelerGrid.Birthday_tra[Record]#', '')

</CFQUERY> </CFCASE> <CFCASE VALUE="D">

<CFQUERY NAME="DeleteTraveler"

DATASOURCE="#application.dsn#">

DELETE FROM Traveler

WHERE Key_tra=|Form.TravelerGrid.

Original.Key_tra[Record]#

</CFQUERY> </CFCASE>

</CFSWITCH> </CFLOOP> </CFIF>

<META HTTP-EQUIV="Refresh"

CONTENT="0;URL=CFGRID_6.cfm">

</BODY> </HTML>

На странице CFGRID 6.cfm для поля с днями рождения был применен атрибут BGCOLOR со встроенным выражением. Все дело в том, что для атрибутов TEXTCOLOR и BGCOLOR ColdFusion дает возможность вместо конкретного значения использовать выражение, позволяющее определять значение по условию. Причем формат выражения должен выглядеть следующим образом: (СХ Operator String ? TrueCondition : FalseCondition) где:

• сх — колонка, по значению которой проверяется условие. Для текущей колонки следует использовать сх, а для конкретной колонки указывать сп, где n — порядковый номер колонки;
  
• operator — в качестве оператора можно использовать: EQ (равно), GT (больше) или LT (меньше);
  
• string - строка, начиная с которой проверяется значение указанной колонки;
  
• TrueCondition — значение атрибута при соблюдении условия; О FalseCondition — значение атрибута при несоблюдении условия. В нашем примере конструкция выглядит так:
  

BGCOLOR="(CX GT 1970-06-06 ? EDECEO : Orange)"

Что позволяет выделить цветом EDECEO сведения о тех, кто родился до 6 июня 1970 года, и закрасить оранжевым цветом даты рождения всех остальных.

Тег <CFGRIDCOLUMN> позволяет определять маску (mask) колонки, используя атрибут NUMBERFORMAT подобно функции ColdFusion. NumberFormat. Применяется для числовых значений, например:

<CFGRIDCOLUMN NAME="CostAdult_tou" HEADER="Adults" NUMBERFORMAT="$__.__">

Тег <CFGRID>, так же, как теги <CFINPUT>, <CFTEXTINPUT>, <CFSLIDER> и <CFTREE>, поддерживает атрибуты ONERROR и ONVALIDATE.

Тег <CFAPPLET>

Тег <CFAPPLET> предназначен для включения в код собственных Java-апплетов. Используемый Java-апплет предварительно должен быть зарегистрирован на странице администратора "ColdFusion Administrator" в разделе Server | Extensions | Java Applets (Сервер | Расширения | Java-апплеты).

Здесь:

• Applet Name (Имя апплета) — наименование апплета;
  
• Code (Код) — имя файла, содержащего апплет;
  
• Code Base (Основной код) — путь к каталогу, содержащему файл апплета; данное значение нет необходимости указывать при использовании значения Archive (Архив);
  
• Archive (Архив) — указание на архивный jar-файл, содержащий апплет;
  
• Method (Метод) — наименование метода, который возвращает символьное значение. Наименование метода используется с тегом <CFAPPLET> в качестве атрибута. Если апплет не имеет метода, этот пункт не указывается;
  
• Height (Высота) — высота области апплета в пикселах; соответствует атрибуту HEIGHT тега <CFAPPLET>;
  
• Width (Ширина) — ширина области апплета в пикселах; соответствует атрибуту WIDTH тега <CFAPPLET>;
  
• VSpace (Вертикальный интервал) — величина незаполненного пространства сверху и снизу от апплета в пикселах; соответствует атрибуту VSPACE тега <CFAPPLET>;
  
• HSpace (Горизонтальный интервал) - величина незаполненного пространства слева и справа от апплета в пикселах; соответствует атрибуту HSPACE тега <CFAPPLET>;
  
• Align (Выровнять) — выравнивание апплета. (LEFT, RIGHT, BOTTOM, TOP, TEXTTOP, MIDDLE, ABSMIDDLE, BASELINE или ABSBOTTOM); соответствует атрибуту ALIGN тега <CFAPPLET>;
  
• Not Supported Message (Сообщение при отсутствии поддержки) — текст сообщения, выводимого на экран, при отсутствии поддержки браузером Java-апплетов; соответствует атрибуту NOTSUPPORTED тега <CFAPPLET>;
  
• Parameter Name (Имя параметра) — перечень наименований необходимых параметров при использовании апплета;
  
• Value (Значение) — перечень значений указанных параметров.
  

Также необходимые параметры можно указывать с помощью тега <CFAPPLET> при непосредственном использовании Java-апплета.

Приведенным ниже примером мы завершаем описание построения форм на основе тега <CFFORM>, где интегрируем в CFML-страницу Java-апплет copytext:

<HTML> <HEAD>

<TITLE>CFAPPLET</TITLE> </HEAD> <BODY bgcolor="Silver">

<CFFORM NAME="Forml" ACTION="CFAPPLET_.cfm">

<CFAPPLET APPLETSOURCE="Copytext" NAME="Copytext"

WIDTH="250" HEIGHT="70"> </CFFORM>

</BODY> </HTML>

При использовании тега <CFAPPLET> обязательными атрибутами являются:

• APPLETSOURCE — наименование зарегистрированного Java-апплета;
• NAME — имя переменной формы для Java-апплета.
  

Отметим, что все управляющие элементы тега формы <CFFORM>, основанные на Java-апплетах, а это <CFTEXTINPUT>, <CFSLIDER>, <CFTREE>, <CFGRID> и <CFAPPLET>, поддерживают атрибут NOTSUPPORTED, позволяющий указывать текст сообщения, выводимого на экран, при отсутствии поддержки браузером Java-апплетов.

Резюме

Подведем итог. В данной главе мы использовали CFML-теги: <CFFORM>, <CFINPUT>, <CFSELECT>, <CFTEXTINPUT>, <CFSLIDER>, <CFTREE>, <CFTREEITEM>, <CFGRID>, <CFGRIDCOLUMN>, <CFGRIDROW>, <CFAPPLET>.